<!-- 静态授权（K手） 二维码 -->
<template>
  <ele-modal
    v-if=visible
    class="el-model-class"
    :show-close="false"
    width="380px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    @close="updateVisible(false)"
  >
    <div class="qr-code">
      <p class="qr-title">K手登录</p>
      <div class="qr-code-main" style="height: 280px; width: 280px;">
        <img :src="code.data" alt="二维码图片" width="280px">
      </div>
      <div class="qr-refresh-text"> 请用K手扫描二维码登录</div>
    </div>
  </ele-modal>
</template>

<script>
  import { getKsCode } from "@/api/digitalHumanManagement/taskList";
  export default {
    data(){
      return {
        // 快手二维码
        code:'',
        // 弹窗是否打开
        visible:false,
      }
    },
    name: "static-code",
    props: {
      //1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手
      // type:Number
    },
    created(){

    },
    methods:{
      async show(id){
        console.log("id=====",id)
        this.visible=true
        // 获取K手静态二维码
        this.code =await getKsCode(id)
        console.log("code===============",this.code)
      },
      /* 更新 visible */
      updateVisible(value) {
        this.visible=value
      },
    }
  }
</script>

<style scoped lang="less">
  /*  K手二维码*/
  .qr-code {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 380px;
    height: 536px;
    background: #fff;
    .qr-title {
      height: 45px;
      font-size: 32px;
      font-weight: 400;
      color: #222;
      line-height: 45px;
      margin: 52px auto 27px;
    }
    .qr-code-main {
      position: relative;
    }
    .qr-refresh-text {
      margin-top: 10px;
      width: 242px;
      font-size: 22px;
      font-weight: 400;
      color: #222;
      line-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>


